<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#6B7280',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        info: '#3B82F6',
                        dark: '#1F2937',
                        light: '#F3F4F6'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg transition-all hover:bg-primary/90 focus:ring-2 focus:ring-primary/50 focus:outline-none;
            }
            .btn-secondary {
                @apply bg-white text-dark border border-gray-300 px-4 py-2 rounded-lg transition-all hover:bg-gray-50 focus:ring-2 focus:ring-gray-200 focus:outline-none;
            }
            .btn-danger {
                @apply bg-danger text-white px-4 py-2 rounded-lg transition-all hover:bg-danger/90 focus:ring-2 focus:ring-danger/50 focus:outline-none;
            }
            .btn-success {
                @apply bg-success text-white px-4 py-2 rounded-lg transition-all hover:bg-success/90 focus:ring-2 focus:ring-success/50 focus:outline-none;
            }
            .sidebar-link {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all hover:bg-gray-100;
            }
            .sidebar-link.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .badge {
                @apply px-2 py-1 text-xs rounded-full font-medium;
            }
            .badge-primary {
                @apply bg-primary/10 text-primary;
            }
            .badge-success {
                @apply bg-success/10 text-success;
            }
            .badge-warning {
                @apply bg-warning/10 text-warning;
            }
            .badge-danger {
                @apply bg-danger/10 text-danger;
            }
            .badge-info {
                @apply bg-info/10 text-info;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="w-10 h-10 rounded-lg bg-primary text-white flex items-center justify-center text-xl font-bold">
                    黄
                </div>
                <h1 class="text-xl font-bold text-dark hidden sm:block">黄淮学院校园活动管理系统</h1>
            </div>
            
            <div class="flex items-center gap-4">
                <div class="hidden md:flex items-center gap-6">
                    <a href="index.html" class="text-dark hover:text-primary transition-colors">首页</a>
                    <a href="activities.html" class="text-dark hover:text-primary transition-colors">活动列表</a>
                    <a href="discover.html" class="text-dark hover:text-primary transition-colors">发现</a>
                    <a href="publish-activity.html" class="btn-primary">发布活动</a>
                </div>
                
                <div class="relative group">
                    <button class="flex items-center gap-2 p-2 rounded-full hover:bg-gray-100 transition-all">
                        <span class="relative">
                            <i class="fa fa-bell-o text-xl"></i>
                            <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                        </span>
                    </button>
                    <div class="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-lg py-2 hidden group-hover:block z-50">
                        <div class="px-4 py-2 border-b border-gray-100">
                            <h3 class="font-medium">通知消息</h3>
                        </div>
                        <div class="max-h-80 overflow-y-auto">
                            <a href="#" class="flex items-start gap-3 p-3 hover:bg-gray-50 transition-all">
                                <div class="w-8 h-8 rounded-full bg-success/20 flex items-center justify-center text-success">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-dark truncate">报名已通过</p>
                                    <p class="text-xs text-gray-500">您已成功报名参加「校园科技节开幕式」</p>
                                    <p class="text-xs text-gray-400 mt-1">2小时前</p>
                                </div>
                            </a>
                            <a href="#" class="flex items-start gap-3 p-3 hover:bg-gray-50 transition-all">
                                <div class="w-8 h-8 rounded-full bg-warning/20 flex items-center justify-center text-warning">
                                    <i class="fa fa-clock-o"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-dark truncate">活动即将开始</p>
                                    <p class="text-xs text-gray-500">「大学生创新创业大赛宣讲会」将在1小时后开始</p>
                                    <p class="text-xs text-gray-400 mt-1">4小时前</p>
                                </div>
                            </a>
                            <a href="#" class="flex items-start gap-3 p-3 hover:bg-gray-50 transition-all">
                                <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-dark truncate">新活动推荐</p>
                                    <p class="text-xs text-gray-500">为您推荐「校园秋季运动会」，快去报名吧！</p>
                                    <p class="text-xs text-gray-400 mt-1">昨天</p>
                                </div>
                            </a>
                        </div>
                        <div class="px-4 py-2 border-t border-gray-100 text-center">
                            <a href="#" class="text-sm text-primary hover:underline">查看全部</a>
                        </div>
                    </div>
                </div>
                
                <div class="relative group">
                    <button class="flex items-center gap-2 p-1 rounded-full hover:bg-gray-100 transition-all">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                        <span class="hidden sm:block font-medium">李小明</span>
                        <i class="fa fa-angle-down text-gray-400 hidden sm:block"></i>
                    </button>
                    <div class="absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-lg py-2 hidden group-hover:block z-50">
                        <a href="profile.html" class="flex items-center gap-3 px-4 py-2 text-dark hover:bg-gray-50 transition-all">
                            <i class="fa fa-user-o w-5 text-center"></i>
                            <span>个人中心</span>
                        </a>
                        <a href="#" class="flex items-center gap-3 px-4 py-2 text-dark hover:bg-gray-50 transition-all">
                            <i class="fa fa-cog w-5 text-center"></i>
                            <span>账号设置</span>
                        </a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="login.html" class="flex items-center gap-3 px-4 py-2 text-danger hover:bg-gray-50 transition-all">
                            <i class="fa fa-sign-out w-5 text-center"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
                
                <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full hidden">
            <div class="container mx-auto px-4 py-3 flex flex-col gap-2">
                <a href="index.html" class="py-2 px-3 rounded-lg hover:bg-gray-100 transition-all">首页</a>
                <a href="activities.html" class="py-2 px-3 rounded-lg hover:bg-gray-100 transition-all">活动列表</a>
                <a href="discover.html" class="py-2 px-3 rounded-lg hover:bg-gray-100 transition-all">发现</a>
                <a href="publish-activity.html" class="py-2 px-3 rounded-lg bg-primary text-white text-center">发布活动</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-28 pb-16">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏导航 -->
            <div class="lg:w-64">
                <div class="bg-white rounded-xl shadow-sm p-5 sticky top-28">
                    <!-- 用户角色切换 -->
                    <div class="mb-6">
                        <h3 class="text-sm text-gray-500 mb-2">角色切换</h3>
                        <div class="flex gap-2">
                            <button id="studentRoleBtn" class="flex-1 py-2 rounded-lg bg-primary text-white text-sm transition-all">学生</button>
                            <button id="organizerRoleBtn" class="flex-1 py-2 rounded-lg bg-gray-100 text-gray-600 text-sm transition-all">主办方</button>
                        </div>
                    </div>

                    <!-- 学生菜单 -->
                    <div id="studentMenu">
                        <div class="space-y-1">
                            <a href="#personal-info" class="sidebar-link active">
                                <i class="fa fa-user-o"></i>
                                <span>个人信息</span>
                            </a>
                            <a href="#my-activities" class="sidebar-link">
                                <i class="fa fa-calendar-check-o"></i>
                                <span>我的报名</span>
                            </a>
                            <a href="#my-collections" class="sidebar-link">
                                <i class="fa fa-star-o"></i>
                                <span>我的收藏</span>
                            </a>
                            <a href="#notifications" class="sidebar-link">
                                <i class="fa fa-bell-o"></i>
                                <span>消息通知</span>
                                <span class="ml-auto badge badge-danger">3</span>
                            </a>
                        </div>
                    </div>

                    <!-- 主办方菜单 -->
                    <div id="organizerMenu" class="hidden">
                        <div class="space-y-1">
                            <a href="#organizer-info" class="sidebar-link active">
                                <i class="fa fa-user-o"></i>
                                <span>个人信息</span>
                            </a>

                            <a href="#published-activities" class="sidebar-link">
                                <i class="fa fa-calendar-plus-o"></i>
                                <span>发布活动</span>
                            </a>
                            

                            <a href="#organizer-notifications" class="sidebar-link">
                                <i class="fa fa-bell-o"></i>
                                <span>消息通知</span>
                                <span class="ml-auto badge badge-danger">3</span>
                            </a>
                        </div>
                    </div>

                    <div class="border-t border-gray-100 my-4"></div>
                    
                    <div class="space-y-1">
                        <a href="#settings" class="sidebar-link">
                            <i class="fa fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="login.html" class="sidebar-link text-danger">
                            <i class="fa fa-sign-out"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="flex-1">
                <!-- 学生 - 个人信息 -->
                <section id="personal-info" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <div class="flex flex-col md:flex-row gap-8">
                        <!-- 头像区域 -->
                        <div class="flex-shrink-0 w-full md:w-auto">
                            <div class="flex flex-col items-center">
                                <div class="relative w-32 h-32 mb-3">
                                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full rounded-full object-cover border-4 border-white shadow-sm">
                                    <label class="absolute bottom-0 right-0 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center cursor-pointer hover:bg-primary/90 transition-all shadow-sm">
                                        <input type="file" class="hidden">
                                        <i class="fa fa-camera"></i>
                                    </label>
                                </div>
                                <span class="text-sm text-gray-500">点击更换头像</span>
                            </div>
                        </div>

                        <!-- 信息表单 -->
                        <div class="flex-1">
                            <h2 class="text-xl font-bold mb-6">个人信息</h2>
                            <form id="student-info-form" class="space-y-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                                        <input type="text" value="2021010101" disabled class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                        <input type="text" value="李小明" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                    </div>
                                </div>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">院系</label>
                                        <input type="text" value="计算机学院" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                        <input type="tel" value="13800138000" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                                    <textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">热爱编程，喜欢参加各种科技类活动，希望能结交更多志同道合的朋友。</textarea>
                                </div>
                                
                                <div class="flex justify-end gap-3 pt-2">
                                    <button type="button" class="btn-secondary">取消</button>
                                    <button type="submit" class="btn-primary">保存修改</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>

                <!-- 学生 - 我的报名 -->
                <section id="my-activities" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6"> 
                         <h2 class="text-xl font-bold">我的报名</h2> 
                         <div class="flex gap-2"> 
                             <button class="tab-btn active py-1 px-3 rounded-lg text-sm font-medium bg-primary/10 text-primary">全部</button> 
                             <button class="tab-btn py-1 px-3 rounded-lg text-sm font-medium hover:bg-gray-100">即将开始</button> 
                             <button class="tab-btn py-1 px-3 rounded-lg text-sm font-medium hover:bg-gray-100">进行中</button> 
                             <button class="tab-btn py-1 px-3 rounded-lg text-sm font-medium hover:bg-gray-100">已结束</button> 
                         </div> 
                     </div>

                    <div class="space-y-4">
                        <!-- 活动项 -->
                        <div class="flex flex-col md:flex-row gap-4 p-4 border border-gray-100 rounded-xl hover:shadow-sm transition-all">
                            <div class="w-full md:w-40 h-24 rounded-lg overflow-hidden flex-shrink-0">
                                <img src="https://picsum.photos/id/1/200/120" alt="活动图片" class="w-full h-full object-cover">
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start mb-1">
                                    <h3 class="font-bold text-dark truncate">2023年校园科技节开幕式</h3>
                                    <span class="badge badge-primary">即将开始</span>
                                </div>
                                <p class="text-sm text-gray-500 mb-2 line-clamp-1">校学生会科技部</p>
                                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 mb-3">
                                    <span><i class="fa fa-calendar-o mr-1"></i>2023-10-15</span>
                                    <span><i class="fa fa-clock-o mr-1"></i>09:00-11:00</span>
                                    <span><i class="fa fa-map-marker mr-1"></i>中心体育场</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-500">报名时间: 2023-10-01</span>
                                    <div class="flex gap-2">
                                        <button class="btn-secondary text-xs">查看详情</button>
                                        <button class="btn-danger text-xs">取消报名</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col md:flex-row gap-4 p-4 border border-gray-100 rounded-xl hover:shadow-sm transition-all">
                            <div class="w-full md:w-40 h-24 rounded-lg overflow-hidden flex-shrink-0">
                                <img src="https://picsum.photos/id/20/200/120" alt="活动图片" class="w-full h-full object-cover">
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start mb-1">
                                    <h3 class="font-bold text-dark truncate">大学生创新创业大赛宣讲会</h3>
                                    <span class="badge badge-primary">即将开始</span>
                                </div>
                                <p class="text-sm text-gray-500 mb-2 line-clamp-1">就业指导中心</p>
                                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 mb-3">
                                    <span><i class="fa fa-calendar-o mr-1"></i>2023-10-18</span>
                                    <span><i class="fa fa-clock-o mr-1"></i>14:30-16:30</span>
                                    <span><i class="fa fa-map-marker mr-1"></i>学术报告中心</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-500">报名时间: 2023-10-05</span>
                                    <div class="flex gap-2">
                                        <button class="btn-secondary text-xs">查看详情</button>
                                        <button class="btn-danger text-xs">取消报名</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col md:flex-row gap-4 p-4 border border-gray-100 rounded-xl hover:shadow-sm transition-all">
                            <div class="w-full md:w-40 h-24 rounded-lg overflow-hidden flex-shrink-0">
                                <img src="https://picsum.photos/id/96/200/120" alt="活动图片" class="w-full h-full object-cover">
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start mb-1">
                                    <h3 class="font-bold text-dark truncate">校园歌手大赛决赛</h3>
                                    <span class="badge badge-gray">已结束</span>
                                </div>
                                <p class="text-sm text-gray-500 mb-2 line-clamp-1">校学生会文艺部</p>
                                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 mb-3">
                                    <span><i class="fa fa-calendar-o mr-1"></i>2023-10-22</span>
                                    <span><i class="fa fa-clock-o mr-1"></i>19:00-21:30</span>
                                    <span><i class="fa fa-map-marker mr-1"></i>音乐厅</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-500">报名时间: 2023-10-08</span>
                                    <button class="btn-secondary text-xs">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="mt-6 flex justify-center">
                        <div class="flex gap-1">
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-gray-400 cursor-not-allowed">
                                <i class="fa fa-angle-left"></i>
                            </button>
                            <button class="px-3 py-1 rounded-lg border border-primary bg-primary text-white">1</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 hover:bg-gray-50">2</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 hover:bg-gray-50">
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </section>

                <!-- 学生 - 我的收藏 -->
                <section id="my-collections" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-xl font-bold mb-6">我的收藏</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 收藏活动卡片 -->
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/21/400/225" alt="活动图片" class="w-full h-48 object-cover">
                                <span class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 flex items-center justify-center cursor-pointer hover:bg-white transition-all">
                                    <i class="fa fa-star text-warning"></i>
                                </span>
                                <span class="absolute top-3 left-3 px-2 py-1 rounded-full text-xs font-medium bg-primary text-white">
                                    即将开始
                                </span>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-dark mb-2 line-clamp-1">校园秋季运动会</h3>
                                <div class="flex items-center text-sm text-gray-500 mb-3">
                                    <span class="flex items-center mr-4">
                                        <i class="fa fa-user-o mr-1"></i>
                                        体育部
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fa fa-map-marker mr-1"></i>
                                        田径场
                                    </span>
                                </div>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                                        体育
                                    </span>
                                    <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                                        <i class="fa fa-calendar-o mr-1"></i>
                                        2023-10-20
                                    </span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-500">
                                            <i class="fa fa-users mr-1"></i>
                                            856人已报名
                                        </span>
                                    <button class="btn-primary text-sm">立即报名</button>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/25/400/225" alt="活动图片" class="w-full h-48 object-cover">
                                <span class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 flex items-center justify-center cursor-pointer hover:bg-white transition-all">
                                    <i class="fa fa-star text-warning"></i>
                                </span>
                                <span class="absolute top-3 left-3 px-2 py-1 rounded-full text-xs font-medium bg-primary text-white">
                                    报名中
                                </span>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-dark mb-2 line-clamp-1">考研经验交流会</h3>
                                <div class="flex items-center text-sm text-gray-500 mb-3">
                                    <span class="flex items-center mr-4">
                                        <i class="fa fa-user-o mr-1"></i>
                                        研究生院
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fa fa-map-marker mr-1"></i>
                                        图书馆报告厅
                                    </span>
                                </div>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                                        学习
                                    </span>
                                    <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                                        <i class="fa fa-calendar-o mr-1"></i>
                                        2023-10-25
                                    </span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-500">
                                            <i class="fa fa-users mr-1"></i>
                                            678人已报名
                                        </span>
                                    <button class="btn-primary text-sm">立即报名</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 空状态 (默认隐藏) -->
                    <div id="empty-collection" class="py-16 text-center hidden">
                        <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa fa-star-o text-4xl text-gray-400"></i>
                        </div>
                        <h3 class="text-xl font-medium mb-2">还没有收藏的活动</h3>
                        <p class="text-gray-500 mb-4">去活动列表看看有什么感兴趣的活动吧</p>
                        <a href="activities.html" class="btn-primary">浏览活动</a>
                    </div>
                </section>

                <!-- 学生 - 消息通知 -->
                <section id="notifications" class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-bold">消息通知</h2>
                        <button class="text-sm text-primary hover:underline">全部标为已读</button>
                    </div>

                    <div class="space-y-4">
                        <!-- 通知项 -->
                        <div class="p-4 border border-primary/20 rounded-xl bg-primary/5">
                            <div class="flex gap-4">
                                <div class="w-10 h-10 rounded-full bg-success/20 flex items-center justify-center text-success flex-shrink-0">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex justify-between items-start mb-1">
                                        <h3 class="font-medium text-dark">报名已通过</h3>
                                        <span class="text-xs text-gray-400">2小时前</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mb-2">您已成功报名参加「校园科技节开幕式」，请准时参加活动。</p>
                                    <a href="activity-detail.html" class="text-sm text-primary hover:underline">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <div class="p-4 border border-primary/20 rounded-xl bg-primary/5">
                            <div class="flex gap-4">
                                <div class="w-10 h-10 rounded-full bg-warning/20 flex items-center justify-center text-warning flex-shrink-0">
                                    <i class="fa fa-clock-o"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex justify-between items-start mb-1">
                                        <h3 class="font-medium text-dark">活动即将开始</h3>
                                        <span class="text-xs text-gray-400">4小时前</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mb-2">「大学生创新创业大赛宣讲会」将在1小时后开始，请提前到场。</p>
                                    <a href="activity-detail.html" class="text-sm text-primary hover:underline">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <div class="p-4 border border-primary/20 rounded-xl bg-primary/5">
                            <div class="flex gap-4">
                                <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary flex-shrink-0">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex justify-between items-start mb-1">
                                        <h3 class="font-medium text-dark">新活动推荐</h3>
                                        <span class="text-xs text-gray-400">昨天</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mb-2">为您推荐「校园秋季运动会」，快去报名吧！</p>
                                    <a href="activity-detail.html" class="text-sm text-primary hover:underline">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <div class="p-4 border border-gray-100 rounded-xl">
                            <div class="flex gap-4">
                                <div class="w-10 h-10 rounded-full bg-info/20 flex items-center justify-center text-info flex-shrink-0">
                                    <i class="fa fa-bullhorn"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex justify-between items-start mb-1">
                                        <h3 class="font-medium text-dark">系统公告</h3>
                                        <span class="text-xs text-gray-400">2天前</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mb-2">校园活动管理系统将于本周日进行维护升级，届时系统可能短暂无法访问。</p>
                                    <a href="#" class="text-sm text-primary hover:underline">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 主办方相关内容 (默认隐藏) -->
                <div id="organizer-content" class="hidden">
                    <!-- 主办方 - 个人信息 -->
                    <section id="organizer-info" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                        <div class="flex flex-col md:flex-row gap-8">
                            <!-- 头像区域 -->
                            <div class="flex-shrink-0 w-full md:w-auto">
                                <div class="flex flex-col items-center">
                                    <div class="relative w-32 h-32 mb-3">
                                        <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="w-full h-full rounded-full object-cover border-4 border-white shadow-sm">
                                        <label class="absolute bottom-0 right-0 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center cursor-pointer hover:bg-primary/90 transition-all shadow-sm">
                                            <input type="file" class="hidden">
                                            <i class="fa fa-camera"></i>
                                        </label>
                                    </div>
                                    <span class="text-sm text-gray-500">点击更换头像</span>
                                </div>
                            </div>

                            <!-- 信息表单 -->
                            <div class="flex-1">
                                <h2 class="text-xl font-bold mb-6">个人信息</h2>
                                <form id="organizer-info-form" class="space-y-4">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                                            <input type="text" value="2021020202" disabled class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                            <input type="text" value="张小红" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                        </div>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">院系</label>
                                            <input type="text" value="计算机学院" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">单位名称</label>
                                            <input type="text" value="计算机学院学生会" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                        </div>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                            <input type="tel" value="13900139000" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                                            <input type="text" value="张小红" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">组织简介</label>
                                        <textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary">计算机学院学生会是服务学生的自治组织，负责组织各类学术、文体活动，丰富学生课余生活。</textarea>
                                    </div>
                                    
                                    <div class="flex justify-end gap-3 pt-2">
                                        <button type="button" class="btn-secondary">取消</button>
                                        <button type="submit" class="btn-primary">保存修改</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>





                    <!-- 主办方 - 发布的活动 -->
                    <section id="published-activities" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold">发布的活动</h2>
                            <button id="publish-new-btn" class="btn-primary flex items-center gap-2">
                                <i class="fa fa-plus"></i>
                                <span>发布新活动</span>
                            </button>
                        </div>
                        
                        <!-- 操作成功提示 (默认隐藏) -->
                        <div id="action-message" class="mb-4 p-3 rounded-lg text-white hidden">
                            <div class="flex items-center gap-2">
                                <i class="fa fa-check-circle"></i>
                                <span id="message-text">操作成功</span>
                            </div>
                        </div>
                        
                        <!-- 活动表单区域 (默认隐藏) -->
                        <div id="activity-form-section" class="mb-6 border-t border-gray-200 pt-6 hidden">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-medium">创建/编辑活动</h3>
                                <button id="close-form-btn" class="text-gray-500 hover:text-gray-700">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                            <form id="activity-form">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">活动标题</label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="请输入活动标题">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">活动分类</label>
                                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                            <option value="">请选择分类</option>
                                            <option value="1">科技</option>
                                            <option value="2">文艺</option>
                                            <option value="3">体育</option>
                                            <option value="4">学术</option>
                                            <option value="5">创业</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">活动时间</label>
                                        <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">活动地点</label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="请输入活动地点">
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">活动简介</label>
                                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg" rows="3" placeholder="请输入活动简介"></textarea>
                                </div>
                                <div class="flex justify-end gap-2">
                                    <button type="button" id="cancel-form-btn" class="btn-secondary">取消</button>
                                    <button type="submit" class="btn-primary">保存活动</button>
                                </div>
                            </form>
                        </div>
                        
                        <!-- 活动详情区域 (默认隐藏) -->
                        <div id="activity-detail-section" class="mb-6 border-t border-gray-200 pt-6 hidden">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-medium">活动详情</h3>
                                <button id="close-detail-btn" class="text-gray-500 hover:text-gray-700">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                            <div id="detail-content">
                                <!-- 活动详情内容将在这里动态加载 -->
                            </div>
                        </div>
                        
                        <!-- 活动状态筛选按钮组 -->
                        <div class="flex flex-wrap gap-2 mb-6">
                            <button class="filter-btn active py-1.5 px-4 rounded-lg text-sm font-medium bg-primary/10 text-primary">
                                全部
                            </button>
                            <button class="filter-btn py-1.5 px-4 rounded-lg text-sm font-medium hover:bg-gray-100">
                                进行中
                            </button>
                            <button class="filter-btn py-1.5 px-4 rounded-lg text-sm font-medium hover:bg-gray-100">
                                已结束
                            </button>
                            <button class="filter-btn py-1.5 px-4 rounded-lg text-sm font-medium hover:bg-gray-100">
                                已下线
                            </button>
                        </div>
                        
                        <!-- 活动列表 -->
                        <div class="space-y-4">
                        <!-- 空状态显示 (默认隐藏) -->
                        <div id="activities-empty-state" class="py-12 text-center" style="display: none;">
                            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center text-gray-400">
                                <i class="fa fa-calendar-o text-2xl"></i>
                            </div>
                            <h3 class="text-lg font-medium text-gray-800 mb-2">暂无活动</h3>
                            <p class="text-sm text-gray-500 mb-4">您还没有发布任何活动，点击下方按钮开始发布</p>
                            <button class="btn-primary inline-flex items-center gap-2" onclick="document.getElementById('publish-new-btn').click()">
                                <i class="fa fa-plus"></i>
                                <span>发布新活动</span>
                            </button>
                        </div>
                            <!-- 活动项1 -->
                            <div class="activity-item" data-id="1">
                                <div class="flex flex-col md:flex-row gap-4 p-4 border border-gray-100 rounded-xl hover:shadow-sm transition-all">
                                    <div class="w-full md:w-40 h-24 rounded-lg overflow-hidden flex-shrink-0">
                                        <img src="https://picsum.photos/id/1/200/120" alt="活动图片" class="w-full h-full object-cover">
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start mb-1">
                                            <h3 class="font-bold text-dark truncate">2023年校园科技节开幕式</h3>
                                            <span class="badge badge-primary">进行中</span>
                                        </div>
                                        <p class="text-sm text-gray-500 mb-2 line-clamp-1">校学生会科技部</p>
                                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 mb-3">
                                            <span><i class="fa fa-calendar-o mr-1"></i>2023-10-15</span>
                                            <span><i class="fa fa-clock-o mr-1"></i>09:00-11:00</span>
                                            <span><i class="fa fa-map-marker mr-1"></i>中心体育场</span>
                                        </div>
                                        <div class="flex flex-wrap items-center gap-2 mb-3">
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">科技</span>
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">开幕式</span>
                                        </div>
                                        <div class="flex justify-between items-center">
                                            <div class="text-sm">
                                                <span class="text-gray-500">报名人数：</span>
                                                <span class="font-medium">128/200</span>
                                            </div>
                                            <div class="activity-actions flex gap-2">
                                                <button data-action="offline" class="btn-secondary text-xs">下线活动</button>
                                                <button data-action="edit" class="btn-primary text-xs">编辑</button>
                                                <button data-action="view" class="btn-outline text-xs">查看</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 活动项2 -->
                            <div class="activity-item" data-id="2">
                                <div class="flex flex-col md:flex-row gap-4 p-4 border border-gray-100 rounded-xl hover:shadow-sm transition-all">
                                    <div class="w-full md:w-40 h-24 rounded-lg overflow-hidden flex-shrink-0">
                                        <img src="https://picsum.photos/id/20/200/120" alt="活动图片" class="w-full h-full object-cover">
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start mb-1">
                                            <h3 class="font-bold text-dark truncate">大学生创新创业大赛宣讲会</h3>
                                            <span class="badge badge-primary">进行中</span>
                                        </div>
                                        <p class="text-sm text-gray-500 mb-2 line-clamp-1">就业指导中心</p>
                                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 mb-3">
                                            <span><i class="fa fa-calendar-o mr-1"></i>2023-10-18</span>
                                            <span><i class="fa fa-clock-o mr-1"></i>14:30-16:30</span>
                                            <span><i class="fa fa-map-marker mr-1"></i>学术报告中心</span>
                                        </div>
                                        <div class="flex flex-wrap items-center gap-2 mb-3">
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">创业</span>
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">宣讲会</span>
                                        </div>
                                        <div class="flex justify-between items-center">
                                            <div class="text-sm">
                                                <span class="text-gray-500">报名人数：</span>
                                                <span class="font-medium">89/150</span>
                                            </div>
                                            <div class="activity-actions flex gap-2">
                                                <button data-action="offline" class="btn-secondary text-xs">下线活动</button>
                                                <button data-action="edit" class="btn-primary text-xs">编辑</button>
                                                <button data-action="view" class="btn-outline text-xs">查看</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 活动项3 -->
                            <div class="activity-item" data-id="3">
                                <div class="flex flex-col md:flex-row gap-4 p-4 border border-gray-100 rounded-xl hover:shadow-sm transition-all">
                                    <div class="w-full md:w-40 h-24 rounded-lg overflow-hidden flex-shrink-0">
                                        <img src="https://picsum.photos/id/96/200/120" alt="活动图片" class="w-full h-full object-cover">
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start mb-1">
                                            <h3 class="font-bold text-dark truncate">校园歌手大赛决赛</h3>
                                            <span class="badge badge-gray">已结束</span>
                                        </div>
                                        <p class="text-sm text-gray-500 mb-2 line-clamp-1">校学生会文艺部</p>
                                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 mb-3">
                                            <span><i class="fa fa-calendar-o mr-1"></i>2023-10-22</span>
                                            <span><i class="fa fa-clock-o mr-1"></i>19:00-21:30</span>
                                            <span><i class="fa fa-map-marker mr-1"></i>音乐厅</span>
                                        </div>
                                        <div class="flex flex-wrap items-center gap-2 mb-3">
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">文艺</span>
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">比赛</span>
                                        </div>
                                        <div class="flex justify-between items-center">
                                            <div class="text-sm">
                                                <span class="text-gray-500">报名人数：</span>
                                                <span class="font-medium">256/300</span>
                                            </div>
                                            <div class="activity-actions flex gap-2">
                                                <button data-action="republish" class="btn-primary text-xs">再次发布</button>
                                                <button data-action="view" class="btn-outline text-xs">查看</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 分页 -->
                        <div class="mt-6 flex justify-center">
                            <div class="pagination flex gap-1">
                                <button class="px-3 py-1 rounded-lg border border-gray-300 text-gray-400 cursor-not-allowed">
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button class="px-3 py-1 rounded-lg border border-primary bg-primary text-white active">1</button>
                                <button class="px-3 py-1 rounded-lg border border-gray-300 hover:bg-gray-50" data-page="2">2</button>
                                <button class="px-3 py-1 rounded-lg border border-gray-300 hover:bg-gray-50" data-page="3">3</button>
                                <button class="px-3 py-1 rounded-lg border border-gray-300 hover:bg-gray-50" data-page="next">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 主办方 - 消息通知 -->
                    <section id="organizer-notifications" class="bg-white rounded-xl shadow-sm p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold">消息通知</h2>
                            <button class="text-sm text-primary hover:underline">全部标为已读</button>
                        </div>

                        <div class="space-y-4">
                            <!-- 通知项 -->
                            <div class="p-4 border border-primary/20 rounded-xl bg-primary/5">
                                <div class="flex gap-4">
                                    <div class="w-10 h-10 rounded-full bg-success/20 flex items-center justify-center text-success flex-shrink-0">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start mb-1">
                                            <h3 class="font-medium text-dark">活动发布成功</h3>
                                            <span class="text-xs text-gray-400">3小时前</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mb-2">您的活动「AI技术讲座」已成功发布，可以在活动列表中查看。</p>
                                        <a href="activity-detail.html" class="text-sm text-primary hover:underline">查看详情</a>
                                    </div>
                                </div>
                            </div>

                            <div class="p-4 border border-primary/20 rounded-xl bg-primary/5">
                                <div class="flex gap-4">
                                    <div class="w-10 h-10 rounded-full bg-warning/20 flex items-center justify-center text-warning flex-shrink-0">
                                        <i class="fa fa-exclamation-circle"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start mb-1">
                                            <h3 class="font-medium text-dark">报名接近上限</h3>
                                            <span class="text-xs text-gray-400">昨天</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mb-2">您的活动「校园书法展」报名人数已达421人，接近设置的上限800人。</p>
                                        <a href="activity-detail.html" class="text-sm text-primary hover:underline">查看详情</a>
                                    </div>
                                </div>
                            </div>

                            <div class="p-4 border border-gray-100 rounded-xl">
                                <div class="flex gap-4">
                                    <div class="w-10 h-10 rounded-full bg-info/20 flex items-center justify-center text-info flex-shrink-0">
                                        <i class="fa fa-bullhorn"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start mb-1">
                                            <h3 class="font-medium text-dark">系统公告</h3>
                                            <span class="text-xs text-gray-400">2天前</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mb-2">校园活动管理系统将于本周日进行维护升级，届时系统可能短暂无法访问。</p>
                                        <a href="#" class="text-sm text-primary hover:underline">查看详情</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                </div>
                
                <!-- 账号设置 - 独立于角色的部分 -->
                <section id="settings" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-xl font-bold mb-6">账号设置</h2>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        <!-- 侧边导航 -->
                        <div class="lg:col-span-1">
                            <div class="space-y-1 sticky top-36">
                                <button class="settings-tab-btn w-full text-left px-4 py-3 rounded-lg transition-all bg-primary/10 text-primary font-medium">修改密码</button>
                                <button class="settings-tab-btn w-full text-left px-4 py-3 rounded-lg transition-all hover:bg-gray-100">安全设置</button>
                                <button class="settings-tab-btn w-full text-left px-4 py-3 rounded-lg transition-all hover:bg-gray-100">隐私设置</button>
                                <button class="settings-tab-btn w-full text-left px-4 py-3 rounded-lg transition-all hover:bg-gray-100">通知偏好</button>
                            </div>
                        </div>
                        
                        <!-- 设置内容区 -->
                        <div class="lg:col-span-2">
                            <!-- 修改密码 -->
                            <div class="settings-content active">
                                <h3 class="text-lg font-medium mb-4">修改密码</h3>
                                <form id="change-password-form" class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
                                        <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary" placeholder="请输入当前密码">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                                        <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary" placeholder="请设置新密码（8-20位，包含字母和数字）">
                                        <p class="text-xs text-gray-500 mt-1">密码长度8-20位，必须包含字母和数字</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                                        <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary" placeholder="请再次输入新密码">
                                    </div>
                                    <div class="flex justify-end gap-3 pt-4">
                                        <button type="button" class="btn-secondary">取消</button>
                                        <button type="submit" class="btn-primary">保存修改</button>
                                    </div>
                                </form>
                            </div>
                            
                            <!-- 安全设置 -->
                            <div class="settings-content hidden">
                                <h3 class="text-lg font-medium mb-4">安全设置</h3>
                                <div class="space-y-6">
                                    <div class="p-4 border border-gray-100 rounded-xl">
                                        <div class="flex justify-between items-center mb-2">
                                            <div>
                                                <h4 class="font-medium">手机验证</h4>
                                                <p class="text-sm text-gray-500">绑定手机可用于找回密码</p>
                                            </div>
                                            <span class="badge badge-success">已验证</span>
                                        </div>
                                        <p class="text-sm">138****8000</p>
                                        <button class="mt-2 text-sm text-primary hover:underline">修改</button>
                                    </div>
                                    
                                    <div class="p-4 border border-gray-100 rounded-xl">
                                        <div class="flex justify-between items-center mb-2">
                                            <div>
                                                <h4 class="font-medium">邮箱验证</h4>
                                                <p class="text-sm text-gray-500">绑定邮箱可用于找回密码</p>
                                            </div>
                                            <span class="badge badge-warning">未验证</span>
                                        </div>
                                        <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:outline-none focus:border-primary mb-2" placeholder="请输入邮箱地址">
                                        <button class="btn-primary">发送验证码</button>
                                    </div>
                                    
                                    <div class="p-4 border border-gray-100 rounded-xl">
                                        <h4 class="font-medium mb-3">登录设备管理</h4>
                                        <div class="space-y-3">
                                            <div class="flex justify-between items-center">
                                                <div class="flex items-center gap-3">
                                                    <i class="fa fa-desktop text-xl text-gray-400"></i>
                                                    <div>
                                                        <p class="text-sm">Windows 10 · Chrome 118</p>
                                                        <p class="text-xs text-gray-500">当前登录 · 192.168.1.1</p>
                                                    </div>
                                                </div>
                                                <span class="badge badge-primary">当前</span>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <div class="flex items-center gap-3">
                                                    <i class="fa fa-mobile text-xl text-gray-400"></i>
                                                    <div>
                                                        <p class="text-sm">Android 13 · 微信浏览器</p>
                                                        <p class="text-xs text-gray-500">2小时前 · 113.245.78.90</p>
                                                    </div>
                                                </div>
                                                <button class="text-sm text-danger hover:underline">下线</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 隐私设置 -->
                            <div class="settings-content hidden">
                                <h3 class="text-lg font-medium mb-4">隐私设置</h3>
                                <div class="space-y-4">
                                    <div class="p-4 border border-gray-100 rounded-xl">
                                        <h4 class="font-medium mb-3">个人信息可见性</h4>
                                        <div class="space-y-3">
                                            <div class="flex justify-between items-center">
                                                <div>
                                                    <p class="text-sm">允许他人查看我的报名记录</p>
                                                    <p class="text-xs text-gray-500">控制谁可以看到您参加了哪些活动</p>
                                                </div>
                                                <label class="relative inline-flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer">
                                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                                </label>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <div>
                                                    <p class="text-sm">允许他人查看我的收藏</p>
                                                    <p class="text-xs text-gray-500">控制谁可以看到您收藏的活动</p>
                                                </div>
                                                <label class="relative inline-flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer">
                                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 通知偏好 -->
                            <div class="settings-content hidden">
                                <h3 class="text-lg font-medium mb-4">通知偏好</h3>
                                <div class="space-y-4">
                                    <div class="p-4 border border-gray-100 rounded-xl">
                                        <h4 class="font-medium mb-3">消息通知设置</h4>
                                        <div class="space-y-3">
                                            <div class="flex justify-between items-center">
                                                <p class="text-sm">活动报名成功通知</p>
                                                <label class="relative inline-flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer" checked>
                                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                                </label>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <p class="text-sm">活动即将开始提醒</p>
                                                <label class="relative inline-flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer" checked>
                                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                                </label>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <p class="text-sm">新活动推荐</p>
                                                <label class="relative inline-flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer" checked>
                                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                                </label>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <p class="text-sm">系统公告</p>
                                                <label class="relative inline-flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer" checked>
                                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex justify-end gap-3 pt-2">
                                        <button class="btn-secondary">取消</button>
                                        <button class="btn-primary">保存设置</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-10 h-10 rounded-lg bg-white text-primary flex items-center justify-center text-xl font-bold">
                            黄
                        </div>
                        <h2 class="text-xl font-bold">黄淮学院校园活动管理系统</h2>
                    </div>
                    <p class="text-gray-400 mb-4">为黄淮学院师生提供便捷的校园活动发布、报名、管理服务。</p>
                    <div class="flex gap-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="activities.html" class="text-gray-400 hover:text-white transition-colors">活动列表</a></li>
                        <li><a href="discover.html" class="text-gray-400 hover:text-white transition-colors">发现</a></li>
                        <li><a href="publish-activity.html" class="text-gray-400 hover:text-white transition-colors">发布活动</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">帮助与支持</h3>
                    <ul class="space-y-2">
                        <li><a href="faq.html" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="contact.html" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="terms.html" class="text-gray-400 hover:text-white transition-colors">用户协议</a></li>
                        <li><a href="privacy.html" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-3">
                            <i class="fa fa-map-marker mt-1 text-gray-400"></i>
                            <span class="text-gray-400">河南省驻马店市驿城区开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fa fa-phone text-gray-400"></i>
                            <span class="text-gray-400">0396-2853501</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fa fa-envelope-o text-gray-400"></i>
                            <span class="text-gray-400">contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-white/10 mt-8 pt-8 text-center text-gray-500">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 发布活动模态框 -->
    <div id="activity-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center p-6 border-b border-gray-200">
                <h3 class="text-xl font-bold">创建新活动</h3>
                <button id="modal-close-btn" class="text-gray-500 hover:text-gray-700 text-xl">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="activity-form">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">活动标题</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="请输入活动标题">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">活动分类</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                <option value="">请选择分类</option>
                                <option value="1">科技</option>
                                <option value="2">文艺</option>
                                <option value="3">体育</option>
                                <option value="4">学术</option>
                                <option value="5">创业</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">活动时间</label>
                            <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">活动地点</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="请输入活动地点">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">活动简介</label>
                        <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg" rows="3" placeholder="请输入活动简介"></textarea>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button type="button" id="modal-cancel-btn" class="btn-secondary">取消</button>
                        <button type="submit" class="btn-primary">保存活动</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/profile.js"></script>
<script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 元素引用
            const publishNewBtn = document.getElementById('publish-new-btn');
            const activityModal = document.getElementById('activity-modal');
            const modalCloseBtn = document.getElementById('modal-close-btn');
            const modalCancelBtn = document.getElementById('modal-cancel-btn');
            const activityForm = document.getElementById('activity-form');
            const activityDetailSection = document.getElementById('activity-detail-section');
            const closeDetailBtn = document.getElementById('close-detail-btn');
            const actionMessage = document.getElementById('action-message');
            const messageText = document.getElementById('message-text');
            const detailContent = document.getElementById('detail-content');
            
            // 打开模态框
            function openModal() {
                // 重置表单
                resetActivityForm();
                // 显示模态框
                activityModal.classList.remove('hidden');
                // 防止背景滚动
                document.body.style.overflow = 'hidden';
            }
            
            // 关闭模态框
            function closeModal() {
                activityModal.classList.add('hidden');
                // 恢复背景滚动
                document.body.style.overflow = '';
            }
            
            // 处理发布新活动按钮点击事件
            if (publishNewBtn) {
                publishNewBtn.addEventListener('click', openModal);
            }
            
            // 关闭模态框事件处理
            if (modalCloseBtn) {
                modalCloseBtn.addEventListener('click', closeModal);
            }
            
            if (modalCancelBtn) {
                modalCancelBtn.addEventListener('click', closeModal);
            }
            
            // 点击模态框背景关闭模态框
            activityModal.addEventListener('click', function(e) {
                if (e.target === activityModal) {
                    closeModal();
                }
            });
            
            // 按ESC键关闭模态框
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && !activityModal.classList.contains('hidden')) {
                    closeModal();
                }
            });
            
            // 关闭详情
            if (closeDetailBtn) {
                closeDetailBtn.addEventListener('click', function() {
                    if (activityDetailSection) {
                        activityDetailSection.classList.add('hidden');
                    }
                });
            }
            
            // 表单提交
            if (activityForm) {
                activityForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    // 模拟表单提交
                    submitActivityForm();
                });
            }
            
            // 处理筛选按钮点击
            const filterBtns = document.querySelectorAll('.filter-btn');
            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有按钮的激活状态
                    filterBtns.forEach(b => b.classList.remove('active', 'bg-primary/10', 'text-primary'));
                    filterBtns.forEach(b => b.classList.add('hover:bg-gray-100'));
                    
                    // 添加当前按钮的激活状态
                    this.classList.add('active', 'bg-primary/10', 'text-primary');
                    this.classList.remove('hover:bg-gray-100');
                    
                    // 执行筛选功能
                    const filterType = this.textContent.trim();
                    filterActivities(filterType);
                });
            });
            
            // 处理分页按钮点击
            const pageBtns = document.querySelectorAll('.pagination button:not(:disabled)');
            pageBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    if (!this.classList.contains('cursor-not-allowed')) {
                        const page = this.getAttribute('data-page') || 1;
                        // 实际页面切换逻辑
                        changePage(page);
                    }
                });
            });
            
            // 处理活动操作按钮点击
            const activityActionBtns = document.querySelectorAll('.activity-actions button');
            activityActionBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const action = this.getAttribute('data-action');
                    const activityId = this.closest('.activity-item').getAttribute('data-id');
                    handleActivityAction(activityId, action, this);
                });
            });
            
            // 显示操作消息
            function showMessage(text, isSuccess = true) {
                if (actionMessage && messageText) {
                    messageText.textContent = text;
                    // 设置消息样式
                    actionMessage.className = 'mb-4 p-3 rounded-lg text-white';
                    actionMessage.classList.add(isSuccess ? 'bg-success' : 'bg-danger');
                    actionMessage.classList.remove(isSuccess ? 'bg-danger' : 'bg-success');
                    
                    // 显示消息
                    actionMessage.classList.remove('hidden');
                    
                    // 3秒后自动隐藏
                    setTimeout(() => {
                        actionMessage.classList.add('hidden');
                    }, 3000);
                }
            }
            
            // 显示表单区域
            function showFormSection() {
                if (activityFormSection && activityDetailSection) {
                    activityFormSection.classList.remove('hidden');
                    activityDetailSection.classList.add('hidden');
                }
            }
            
            // 隐藏表单区域
            function hideFormSection() {
                if (activityFormSection) {
                    activityFormSection.classList.add('hidden');
                }
            }
            
            // 显示详情区域
            function showDetailSection() {
                if (activityFormSection && activityDetailSection) {
                    activityFormSection.classList.add('hidden');
                    activityDetailSection.classList.remove('hidden');
                }
            }
            
            // 隐藏详情区域
            function hideDetailSection() {
                if (activityDetailSection) {
                    activityDetailSection.classList.add('hidden');
                }
            }
            
            // 重置活动表单
            function resetActivityForm() {
                if (activityForm) {
                    activityForm.reset();
                    // 移除编辑模式的标识
                    activityForm.dataset.editMode = 'false';
                    activityForm.dataset.activityId = '';
                }
            }
            
            // 提交活动表单
            function submitActivityForm() {
                const isEditMode = activityForm.dataset.editMode === 'true';
                const activityId = activityForm.dataset.activityId;
                
                // 模拟表单处理
                setTimeout(() => {
                    if (isEditMode) {
                        showMessage('活动已成功更新');
                    } else {
                        showMessage('活动已成功创建');
                    }
                    // 关闭模态框
                    closeModal();
                }, 800);
            }
            
            // 切换页面
            function changePage(page) {
                // 更新分页按钮状态
                const pageButtons = document.querySelectorAll('.pagination button');
                pageButtons.forEach(btn => {
                    btn.classList.remove('active', 'bg-primary', 'text-white');
                    btn.classList.add('border-gray-300');
                    
                    const btnPage = btn.getAttribute('data-page') || btn.textContent;
                    if (btnPage === page || (page === 'next' && btn.getAttribute('data-page') === 'next') || 
                        (page === 'prev' && btn.getAttribute('data-page') === 'prev')) {
                        btn.classList.add('active', 'bg-primary', 'text-white');
                        btn.classList.remove('border-gray-300');
                    }
                });
            }
            
            // 筛选活动函数
            function filterActivities(filterType) {
                const activityItems = document.querySelectorAll('.activity-item');
                let visibleCount = 0;
                
                // 根据筛选类型过滤活动
                activityItems.forEach(item => {
                    const statusBadge = item.querySelector('.badge');
                    const statusText = statusBadge.textContent.trim();
                    
                    if (filterType === '全部') {
                        item.style.display = 'block';
                        visibleCount++;
                    } else if (filterType === '进行中' && statusText === '进行中') {
                        item.style.display = 'block';
                        visibleCount++;
                    } else if (filterType === '已结束' && statusText === '已结束') {
                        item.style.display = 'block';
                        visibleCount++;
                    } else if (filterType === '已下线' && statusText === '已下线') {
                        item.style.display = 'block';
                        visibleCount++;
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 显示/隐藏空状态和相关元素
                const emptyState = document.getElementById('activities-empty-state');
                const activitiesList = document.querySelector('#published-activities .space-y-4');
                const pagination = document.querySelector('#published-activities .pagination').parentElement;
                
                if (emptyState) {
                    if (visibleCount === 0) {
                        emptyState.style.display = 'block';
                        // 调整空状态提示文本
                        const emptyStateText = emptyState.querySelector('p');
                        const emptyStateTitle = emptyState.querySelector('h3');
                        if (emptyStateText && emptyStateTitle) {
                            emptyStateTitle.textContent = `暂无${filterType}活动`;
                            emptyStateText.textContent = `您没有${filterType}的活动，点击下方按钮开始发布`;
                        }
                    } else {
                        emptyState.style.display = 'none';
                    }
                }
                
                // 显示/隐藏分页
                if (pagination) {
                    pagination.style.display = visibleCount > 0 ? 'flex' : 'none';
                }
            }
            
            // 处理活动操作函数
            function handleActivityAction(activityId, action, buttonElement) {
                switch(action) {
                    case 'offline':
                        // 直接下线，不使用confirm弹窗
                        offlineActivity(activityId, buttonElement);
                        break;
                    case 'republish':
                        // 直接重新发布，不使用confirm弹窗
                        republishActivity(activityId, buttonElement);
                        break;
                    case 'edit':
                        // 打开编辑表单
                        editActivity(activityId);
                        break;
                    case 'view':
                        // 显示活动详情
                        viewActivity(activityId);
                        break;
                    default:
                        console.log('未知操作:', action);
                }
            }
            
            // 下线活动
            function offlineActivity(activityId, buttonElement) {
                // 模拟API调用
                setTimeout(() => {
                    // 更新活动状态显示
                    const activityItem = buttonElement.closest('.activity-item');
                    const statusBadge = activityItem.querySelector('.badge');
                    statusBadge.textContent = '已下线';
                    statusBadge.className = 'badge badge-gray';
                    
                    // 更新操作按钮
                    const actionsContainer = buttonElement.closest('.activity-actions');
                    actionsContainer.innerHTML = `
                        <button data-action="republish" class="btn-primary text-xs">再次发布</button>
                        <button data-action="edit" class="btn-primary text-xs">编辑</button>
                        <button data-action="view" class="btn-outline text-xs">查看</button>
                    `;
                    
                    // 为新按钮重新绑定事件
                    attachActionEvents(actionsContainer, activityId);
                    
                    // 显示成功消息
                    showMessage('活动已成功下线');
                }, 500);
            }
            
            // 重新发布活动
            function republishActivity(activityId, buttonElement) {
                // 模拟API调用
                setTimeout(() => {
                    // 更新活动状态显示
                    const activityItem = buttonElement.closest('.activity-item');
                    const statusBadge = activityItem.querySelector('.badge');
                    statusBadge.textContent = '进行中';
                    statusBadge.className = 'badge badge-primary';
                    
                    // 更新操作按钮
                    const actionsContainer = buttonElement.closest('.activity-actions');
                    actionsContainer.innerHTML = `
                        <button data-action="offline" class="btn-secondary text-xs">下线活动</button>
                        <button data-action="edit" class="btn-primary text-xs">编辑</button>
                        <button data-action="view" class="btn-outline text-xs">查看</button>
                    `;
                    
                    // 为新按钮重新绑定事件
                    attachActionEvents(actionsContainer, activityId);
                    
                    // 显示成功消息
                    showMessage('活动已成功重新发布');
                }, 500);
            }
            
            // 编辑活动
            function editActivity(activityId) {
                // 模拟加载活动数据
                setTimeout(() => {
                    // 设置表单为编辑模式
                    if (activityForm) {
                        activityForm.dataset.editMode = 'true';
                        activityForm.dataset.activityId = activityId;
                        
                        // 这里可以根据activityId填充表单数据
                        // 模拟填充示例数据
                        const activityItem = document.querySelector(`.activity-item[data-id="${activityId}"]`);
                        if (activityItem) {
                            const title = activityItem.querySelector('h3').textContent;
                            const titleInput = activityForm.querySelector('input[type="text"]');
                            if (titleInput) {
                                titleInput.value = title;
                            }
                        }
                    }
                    
                    // 显示表单
                    showFormSection();
                    
                    // 滚动到表单
                    activityFormSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 300);
            }
            
            // 查看活动详情
            function viewActivity(activityId) {
                // 模拟加载活动详情
                setTimeout(() => {
                    // 获取活动数据
                    const activityItem = document.querySelector(`.activity-item[data-id="${activityId}"]`);
                    let title = '活动详情';
                    let status = '未知';
                    let organizer = '';
                    let date = '';
                    let time = '';
                    let location = '';
                    let image = '';
                    
                    if (activityItem) {
                        title = activityItem.querySelector('h3').textContent;
                        status = activityItem.querySelector('.badge').textContent;
                        organizer = activityItem.querySelector('p.text-sm').textContent;
                        
                        // 获取日期、时间、地点信息
                        const infoSpans = activityItem.querySelectorAll('.text-xs.text-gray-500');
                        infoSpans.forEach(span => {
                            if (span.querySelector('.fa-calendar-o')) {
                                date = span.textContent.trim().replace('日历图标', '');
                            } else if (span.querySelector('.fa-clock-o')) {
                                time = span.textContent.trim().replace('时钟图标', '');
                            } else if (span.querySelector('.fa-map-marker')) {
                                location = span.textContent.trim().replace('地图图标', '');
                            }
                        });
                        
                        // 获取图片
                        const imgElement = activityItem.querySelector('img');
                        if (imgElement) {
                            image = imgElement.src;
                        }
                    }
                    
                    // 构建详情内容
                    const detailHtml = `
                        <div class="mb-6">
                            <div class="w-full h-48 rounded-lg overflow-hidden mb-4">
                                <img src="${image || 'https://picsum.photos/id/1/800/400'}" alt="活动封面" class="w-full h-full object-cover">
                            </div>
                            <div class="flex justify-between items-start mb-4">
                                <h2 class="text-xl font-bold">${title}</h2>
                                <span class="badge ${status === '进行中' ? 'badge-primary' : 'badge-gray'}">${status}</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-4">主办方：${organizer}</p>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <div class="text-xs text-gray-500 mb-1">活动日期</div>
                                    <div class="font-medium">${date}</div>
                                </div>
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <div class="text-xs text-gray-500 mb-1">活动时间</div>
                                    <div class="font-medium">${time}</div>
                                </div>
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <div class="text-xs text-gray-500 mb-1">活动地点</div>
                                    <div class="font-medium">${location}</div>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <h3 class="font-medium mb-2">活动详情</h3>
                                <div class="text-sm text-gray-600">
                                    <p>这是活动的详细描述信息。在实际应用中，这里会显示完整的活动介绍、参与方式、注意事项等内容。</p>
                                    <p class="mt-2">用户可以通过这个详情页面了解活动的所有相关信息，以便决定是否报名参加。</p>
                                </div>
                            </div>
                            
                            <div class="flex gap-2">
                                <button class="btn-primary" onclick="handleActivityAction('${activityId}', 'edit')">编辑活动</button>
                                <button class="btn-secondary">分享活动</button>
                            </div>
                        </div>
                    `;
                    
                    // 更新详情内容
                    if (detailContent) {
                        detailContent.innerHTML = detailHtml;
                    }
                    
                    // 显示详情区域
                    showDetailSection();
                    
                    // 滚动到详情
                    activityDetailSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 500);
            }
            
            // 为活动操作按钮重新绑定事件
            function attachActionEvents(container, activityId) {
                const buttons = container.querySelectorAll('button');
                buttons.forEach(btn => {
                    btn.addEventListener('click', function() {
                        const action = this.getAttribute('data-action');
                        handleActivityAction(activityId, action, this);
                    });
                });
            }
            
            // 暴露给全局，用于详情页面中的按钮调用
            window.handleActivityAction = handleActivityAction;
        });
    </script>
    </body>
</html>